<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="300"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '18px Arial';

    // --- Helper function to draw a spring ---
    function drawSpring(x1, y, x2, numCoils, amplitude) {
        const len = x2 - x1;
        const dx = len / (numCoils * 2); // Each coil has an up and down segment
        ctx.beginPath();
        ctx.moveTo(x1, y);
        let currentX = x1;
        for (let i = 0; i < numCoils; i++) {
            ctx.lineTo(currentX + dx, y - amplitude);
            ctx.lineTo(currentX + 2 * dx, y);
            currentX += 2 * dx;
        }
        ctx.stroke();
    }

    // --- Main drawing components ---

    // 1. U-shaped frame
    const yBase = 220;
    const yWallTop = 100;
    const xLeftWallInner = 70;
    const xRightWallInner = 530;
    const wallThickness = 20;
    
    ctx.fillStyle = '#d3d3d3'; // Light gray
    ctx.beginPath();
    ctx.moveTo(xLeftWallInner - wallThickness, yWallTop); // Top-left outer
    ctx.lineTo(xLeftWallInner - wallThickness, yBase + wallThickness); // Bottom-left outer
    ctx.lineTo(xRightWallInner + wallThickness, yBase + wallThickness); // Bottom-right outer
    ctx.lineTo(xRightWallInner + wallThickness, yWallTop); // Top-right outer
    ctx.lineTo(xRightWallInner, yWallTop); // Top-right inner
    ctx.lineTo(xRightWallInner, yBase); // Bottom-right inner
    ctx.lineTo(xLeftWallInner, yBase); // Bottom-left inner
    ctx.lineTo(xLeftWallInner, yWallTop); // Top-left inner
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.fillStyle = 'black'; // Reset fill color

    // 2. Trolley
    const trolleyWidth = 160;
    const trolleyHeight = 80;
    const trolleyX = (canvas.width - trolleyWidth) / 2; // Center it
    const wheelRadius = 18;
    const axleY = yBase - wheelRadius;
    const trolleyY = axleY - trolleyHeight - 5;
    const wheel1X = trolleyX + trolleyWidth * 0.25;
    const wheel2X = trolleyX + trolleyWidth * 0.75;

    // Trolley Body
    ctx.strokeRect(trolleyX, trolleyY, trolleyWidth, trolleyHeight);

    // Axle
    ctx.beginPath();
    ctx.moveTo(wheel1X, axleY);
    ctx.lineTo(wheel2X, axleY);
    ctx.stroke();

    // Wheels
    ctx.beginPath();
    ctx.arc(wheel1X, axleY, wheelRadius, 0, Math.PI * 2);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(wheel2X, axleY, wheelRadius, 0, Math.PI * 2);
    ctx.stroke();

    // 3. Springs and attachment points
    const springY = trolleyY + trolleyHeight / 2;
    const springAmplitude = 12;
    const pointRadius = 4;

    // Left Spring and Point P
    drawSpring(xLeftWallInner, springY, trolleyX, 10, springAmplitude);
    ctx.beginPath();
    ctx.arc(xLeftWallInner, springY, pointRadius, 0, Math.PI * 2);
    ctx.fill();
    ctx.font = 'bold 18px Arial';
    ctx.fillText('P', xLeftWallInner - 25, springY + 6);
    ctx.font = '18px Arial';


    // Right Spring and Point Q
    drawSpring(trolleyX + trolleyWidth, springY, xRightWallInner, 10, springAmplitude);
    ctx.beginPath();
    ctx.arc(xRightWallInner, springY, pointRadius, 0, Math.PI * 2);
    ctx.fill();
    ctx.font = 'bold 18px Arial';
    ctx.fillText('Q', xRightWallInner + 15, springY + 6);
    ctx.font = '18px Arial';


    // 4. Labels and Pointers
    // Trolley label
    const trolleyLabelX = 180;
    const trolleyLabelY1 = 40;
    const trolleyLabelY2 = 60;
    ctx.textAlign = 'left';
    ctx.fillText('trolley', trolleyLabelX, trolleyLabelY1);
    ctx.fillText('mass 950 g', trolleyLabelX, trolleyLabelY2);
    ctx.beginPath();
    ctx.moveTo(trolleyLabelX + 45, trolleyLabelY2 + 5);
    ctx.lineTo(trolleyX + 50, trolleyY);
    ctx.stroke();

    // Spring label
    const springLabelX = 450;
    const springLabelY = 70;
    const rightSpringMidX = (trolleyX + trolleyWidth + xRightWallInner) / 2;
    ctx.fillText('spring', springLabelX, springLabelY);
    ctx.beginPath();
    ctx.moveTo(springLabelX + 15, springLabelY + 5);
    ctx.lineTo(rightSpringMidX, springY - springAmplitude);
    ctx.stroke();

    // 5. Figure Caption
    ctx.textAlign = 'center';
    ctx.font = 'bold 18px Arial';
    ctx.fillText('Fig. 4.1', canvas.width / 2, canvas.height - 10);

</script>
</body>
</html>